<template>
  <div class="health-visualization">
    <!-- 上半部分：人体与疾病标记 -->
    <Card class="body-card">
      <div class="body-section">
        <img src="@/assets/human.svg" class="body-img" />
        <!-- SVG连线 -->
        <svg class="disease-lines" width="400" height="350" style="position:absolute;top:0;left:0;z-index:1;">
          <line v-for="d in diseaseList" :key="d.name" :x1="d.lineStart.x" :y1="d.lineStart.y" :x2="d.lineEnd.x" :y2="d.lineEnd.y" stroke="#2d8cf0" stroke-width="2" stroke-dasharray="4,2" />
        </svg>
        <!-- 疾病标签 -->
        <div v-for="d in diseaseList" :key="d.name" class="disease-tag" :style="{left: d.tagPos.x+'px', top: d.tagPos.y+'px'}">
          {{ d.name }}
        </div>
      </div>
      <div class="patient-info">
        <div class="info-row">
          <span>姓名：{{ userInfo.nickname }}</span>
          <span>性别：{{ userInfo.sex }}</span>
          <span>年龄：{{ userInfo.age }}</span>
        </div>
        <div class="info-row">
          <span>电话：{{ formatPhone(userInfo.mobile) }}</span>
        </div>
      </div>
    </Card>
    <!-- 下半部分：挂号记录卡片 -->
    <Card class="order-card-list">
      <div class="card-scroll">
        <div class="order-card" v-for="item in visitList" :key="item.visitTime">
          <div class="dept">{{ item.deptName }}</div>
          <div class="type">{{ item.diagnosisName }}</div>
          <div class="date">{{ formatDate(item.visitTime) }}</div>
        </div>
      </div>
    </Card>
  </div>
</template>

<script>
import { getHealthVisualization } from './api'
import Cookies from 'js-cookie'

export default {
  name: 'HealthVisualization',
  data() {
    return {
      userInfo: {
        nickname: '',
        sex: '',
        age: 0,
        mobile: ''
      },
      diseaseList: [],
      visitList: [],
      // 疾病标签及连线坐标映射
      positionMap: {
        '呼吸科': { tagPos: { x: 300, y: 40 }, lineStart: { x: 200, y: 120 }, lineEnd: { x: 320, y: 55 } },
        '心血管外科': { tagPos: { x: 320, y: 180 }, lineStart: { x: 240, y: 180 }, lineEnd: { x: 340, y: 195 } },
        '过敏反应科': { tagPos: { x: 60, y: 180 }, lineStart: { x: 160, y: 200 }, lineEnd: { x: 80, y: 195 } },
        '风湿免疫科': { tagPos: { x: 280, y: 120 }, lineStart: { x: 220, y: 150 }, lineEnd: { x: 300, y: 135 } },
        '口腔科': { tagPos: { x: 180, y: 20 }, lineStart: { x: 200, y: 80 }, lineEnd: { x: 190, y: 35 } }
      }
    }
  },
  created() {
    this.getHealthData()
  },
  methods: {
    // 获取健康数据
    async getHealthData() {
      try {
        // 从Cookie中获取用户信息
        const userInfo = JSON.parse(Cookies.get("userInfo"));
        if (!userInfo || !userInfo.id) {
          this.$Message.error('请先登录')
          this.$router.push('/login')
          return
        }
        const res = await getHealthVisualization(userInfo.id)
        if (res.success) {
          const data = res.result
          this.userInfo = data.userInfo
          this.visitList = data.visits
          // 只保留有明确诊断名称的疾病
          const filteredDiseases = data.diseases.filter(disease => disease.name && disease.name !== '待诊断');
          const positionCount = {};
          this.diseaseList = filteredDiseases.map(disease => {
            const position = this.positionMap[disease.position] || this.positionMap['呼吸科']
            if (!positionCount[disease.position]) {
              positionCount[disease.position] = 0;
            }
            const offset = positionCount[disease.position] * 28;
            positionCount[disease.position]++;
            return {
              ...disease,
              tagPos: { x: position.tagPos.x, y: position.tagPos.y + offset },
              lineStart: position.lineStart,
              lineEnd: { x: position.lineEnd.x, y: position.lineEnd.y + offset }
            }
          })
        } else {
          this.$Message.error(res.message || '获取数据失败')
        }
      } catch (error) {
        console.error('获取健康数据失败:', error)
        this.$Message.error('获取健康数据失败')
      }
    },
    // 格式化手机号
    formatPhone(phone) {
      if (!phone) return ''
      return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
    },
    // 格式化日期
    formatDate(date) {
      if (!date) return ''
      const d = new Date(date)
      return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
    }
  }
}
</script>

<style scoped lang="less">
.health-visualization {
  padding: 24px;
  background: #f5f7fa;
  min-height: 100vh;
}
.body-card {
  margin-bottom: 24px;
  padding: 32px 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(45, 140, 240, 0.08);
}
.body-section {
  position: relative;
  width: 400px;
  height: 350px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.body-img {
  width: 320px;
  height: 440px;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  filter: grayscale(0.1);
}
.disease-tag {
  position: absolute;
  background: #2d8cf0;
  color: #fff;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(45, 140, 240, 0.12);
  z-index: 2;
}
.patient-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 24px;
  font-size: 17px;
  color: #222;
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  gap: 8px;
}
.info-row {
  display: flex;
  gap: 32px;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #2d8cf0;
  margin-bottom: 2px;
}
.info-row:last-child {
  font-size: 15px;
  font-weight: 400;
  color: #666;
  letter-spacing: 0.5px;
  justify-content: center;
}
.order-card-list {
  margin-top: 16px;
  padding: 20px 0 8px 0;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(45, 140, 240, 0.08);
}
.card-scroll {
  display: flex;
  overflow-x: auto;
  gap: 16px;
  padding-bottom: 8px;
}
.order-card {
  min-width: 180px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(45, 140, 240, 0.10);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 15px;
  color: #222;
  border: 1px solid #e6f0fa;
}
.order-card .dept {
  font-weight: bold;
  color: #2d8cf0;
  margin-bottom: 6px;
}
.order-card .type {
  font-size: 13px;
  color: #888;
  margin-bottom: 4px;
}
.order-card .date {
  font-size: 13px;
  color: #666;
}
</style>
